{% extends "appbuilder/general/model/show.html" %}

{% extends "appbuilder/baselayout.html" %}

{% block content %}
{{ super() }}

<!-- 添加D3.js库 -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{ model.name }} - 版本时间线</h3>
    </div>
    <div class="panel-body">
        <div id="version-timeline" data-model-id="{{ model_id }}"></div>
    </div>
</div>

<script>
$(document).ready(function() {
    const modelId = $('#version-timeline').data('model-id');
    
    fetch(`/model_visualization/api/version_timeline/${modelId}`)
        .then(response => response.json())
        .then(data => {
            console.log('版本时间线数据:', data); // 添加调试信息
            renderVersionTimeline(data.data, '#version-timeline');
        })
        .catch(error => {
            console.error('加载版本时间线失败:', error);
            $('#version-timeline').html('<p class="text-danger">加载版本时间线失败: ' + error.message + '</p>');
        });
});

function renderVersionTimeline(data, selector) {
    const container = d3.select(selector);
    container.html('');
    
    // 添加调试信息
    console.log('渲染版本时间线数据:', data);
    
    if (!data || data.length === 0) {
        container.html('<p class="text-info">暂无版本历史数据</p>');
        return;
    }
    
    const svg = container.append('svg')
        .attr('width', 800)
        .attr('height', 400);
    
    // 实现时间线可视化逻辑
    const timeline = svg.selectAll('.timeline-item')
        .data(data)
        .enter()
        .append('g')
        .attr('class', 'timeline-item');
    
    // 添加时间线节点和连线
    timeline.append('circle')
        .attr('cx', (d, i) => 50 + i * 100)
        .attr('cy', 200)
        .attr('r', 5)
        .attr('fill', 'steelblue');
    
    timeline.append('text')
        .attr('x', (d, i) => 50 + i * 100)
        .attr('y', 180)
        .attr('text-anchor', 'middle')
        .text(d => d.version);
}
</script>
{% endblock %}